/**
 * @description 出卡啦集市/线报集合
 */
import style from './styles/Collection.less';
import classnames from "classnames";
import React, { useState } from 'react';
import EntryBase from "../Common/EntryBase";
const Fragment = React.Fragment;
import { Toast } from 'wd-mobile';
import TabBar from "components/TabBar";

import icon_close from "images/icon/close.png";
import icon_arrow from "images/icon/arrow.png";

import { line_date, time_line, all_day, del_notice, add_notice } from "api_xukaiyu/app/content";

import util from "commons/util";
let query = util.parseQueryString();

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            line_date: [],
            time_line: [],
            all_day: [],
            lineDateStr: ""
        }
    }
    componentDidMount() {
        const _this = this;
        // 查询线报日期
        line_date().then(res => {
            this.setState({
                line_date: res.data || []
            }, () => {
                if (res.data.length > 0) {
                    this.getTimeLine(res.data[0].id);
                    this.getAllDay(res.data[0].id);
                    this.setState({
                        lineDateStr: res.data[0].lineDateStr
                    })
                    new Swiper(`.${style.dateSwiperContainer}`, {
                        slideToClickedSlide: true,
                        slidesPerView: "auto",
                        centeredSlides: true,
                        on: {
                            slideChangeTransitionEnd: function () {
                                const item = _this.state.line_date[this.activeIndex];
                                _this.getTimeLine(item.id);
                                _this.getAllDay(item.id);
                                _this.setState({
                                    lineDateStr: item.lineDateStr
                                })
                            },
                        }
                    });
                }
            })
        })
    }

    render() {
        return (
            <Fragment>
                <div className={style.dateSwiper}>
                    <div className={style.dateSwiperContainer}>
                        <div className="swiper-wrapper">
                            {
                                this.state.line_date.map((item, index) => {
                                    return (
                                        <div key={index} className="swiper-slide">
                                            <span>{item.lineDate}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className={style.dateSwiperLayer}></div>
                    </div>
                </div>
                <div className={classnames(style.main, "x-scroll-y")}>
                    <div className={classnames(style.collections, style.collectionForTime)}>
                        <div className={style.collectionsTitle}>
                            <span>{this.state.lineDateStr}  线报</span>
                        </div>
                        <div className={style.collectionsContent}>
                            {
                                this.state.time_line.length < 1 && <div className={style.nodata}>无</div>
                            }
                            {
                                this.state.time_line.map((item, index) => {
                                    return (
                                        <CollectionsItem show={index==0} type="time_line"  reportColor={item.reportColor} key={item.id} time={item.reportTime} title={item.reportTitle} content={item.reportContent} id={item.id} noticeStatus={item.noticeStatus} />
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className={classnames(style.collections, style.collectionForToday)}>
                        <div className={style.collectionsTitle}>
                            <span>全天活动</span>
                        </div>
                        <div className={style.collectionsContent}>
                            {
                                this.state.all_day.length < 1 && <div className={style.nodata}>无</div>
                            }
                            {
                                this.state.all_day.map((item, index) => {
                                    return (
                                        <CollectionsItem show={index==0&&(this.state.time_line.length==0)} type="all_day" key={item.id} title={item.reportTitle} content={item.reportContent} id={item.id} noticeStatus={item.noticeStatus} />
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                <TabBar activeIndex={2} />
            </Fragment>
        )
    }

    // 查询当日线报
    getTimeLine(id) {
        Toast.loading("", 10000);
        time_line({
            lineDateId: id
        }).then(res => {
            Toast.destroy();
            this.setState({
                time_line: res.data
            })
        })
    }

    // 查询全天活动
    getAllDay(id) {
        all_day({
            lineDateId: id
        }).then(res => {
            this.setState({
                all_day: res.data
            })
        })
    }
}

class CollectionsItem extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            isShow: props.show,
            noticeStatus: props.noticeStatus
        }
    }

    componentWillReceiveProps(nextProps){
        console.log(nextProps)
    }

    render() {
        const props = this.props;
        return (
            <div className={style.collectionsItemContainer}>
                <div className={style.collectionsItemBigPoint}></div>
                <div className={style.collectionsItemSmallPoint}></div>
                <div className={style.collectionsItemLine}></div>
                <div className={style.collectionsItem}>
                    <div className={style.collectionsItemArrow}></div>
                    <div className={style.collectionsItemWrapper}>
                        <div className={style.collectionsItemTitle} onClick={() => {
                            this.setState({
                                isShow: !this.state.isShow
                            })
                        }} >
                            {
                                props.time && <span className={style.collectionsItemTitleTime} style={!!props.reportColor ? { background: `${props.reportColor}` } : null}>{props.time}</span>
                            }
                            <span className={style.collectionsItemTitleText}>{props.title}</span>
                            <img className={classnames(style.collectionsItemMore, {
                                [style.show]: this.state.isShow
                            })} src={icon_arrow} alt="" />
                        </div>
                        <div className={classnames(style.collectionsItemContent, {
                            [style.show]: this.state.isShow
                        })}>
                            <span className={classnames(style.remindMe, {
                                [style.noticeMe]: !this.state.noticeStatus
                            })} onClick={() => {
                                if (!!this.state.noticeStatus) {
                                    del_notice({ reportId: props.id }).then(res => {
                                        this.setState({
                                            noticeStatus: false
                                        })
                                        Toast.info("已为您取消活动提醒")
                                    })
                                } else {
                                    add_notice({ reportId: props.id }).then(res => {
                                        this.setState({
                                            noticeStatus: true
                                        })
                                        if (this.props.type == "time_line") {
                                            Toast.info("将在活动开启前五分钟通过【出卡啦权益】微信公众号提醒您", 2000)
                                        }
                                        if (this.props.type == "all_day") {
                                            Toast.info("将在次日10点整通过【出卡啦权益】微信公众号提醒您", 2000)
                                        }
                                    })
                                }
                            }}>{!!this.state.noticeStatus ? "取消提醒" : "提醒我"}</span>
                            <div className={style.collectionsItemContentText} dangerouslySetInnerHTML={{ __html: `<div>${props.content.replace(/\s+/g, "<br/>")}</div>` }}></div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default App;